<template>
<div>
  <h1>添加新公告</h1>
  <el-form ref="form" :model="bulletin" label-width="80px">
    <el-form-item label="标　题">
      <el-input v-model="bulletin.title"></el-input>
    </el-form-item>
    <el-form-item label="内　容">
      <el-input type="textarea" v-model="bulletin.content" class="tex" style="display: none"  maxlength="50"
                show-word-limit></el-input>
      <div style="border: 1px solid #ccc;">
        <div style="border: 1px solid #ccc;">
          <!--v-model 可以看成 :value 和 @input ，子组件 my-editor 通过父传子 props 接收 value， 子传父 this.$emit( ) 传递最新值到 父组件 @input 。v-model 语法糖简化了父组件代码的书写。-->
          <my-editor v-model="bulletin.content" :server="uploadServer"></my-editor>
        </div>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</div>
</template>

<script>
import MyEditor from "@/components/ManageMyEditor";
export default {
  name: "ManageBulletin",
  components: {MyEditor},
  data() {
    return {
     bulletin:{
       title:'',
       content:'',
       adminId:null,
     },
      uploadServer:'http://localhost:8080/manage/bulletinUploadImg',
      admin:JSON.parse(localStorage.getItem("admin")),
      toolbarConfig: {
        excludeKeys:[
          'group-video'//去掉视频上传的工具栏
        ]
      },
      editor:null, mode: 'default',
    }
  },
  methods: {
    onSubmit() {
      this.bulletin.adminId = this.admin.id;
      if (this.bulletin.title==null||this.bulletin.title==""){
        this.$message.error("标题不能为空");
        return;
      }
      else{
        this.$axios.post("/manage/addBulletin",this.bulletin).then(res=>{
          this.$message.success("公告发布成功");
        });
      }
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    //自定义上传上传图片
    /*          uploadImg(file, insertFn){
                  let imgData = new FormData();
                  imgData.append('file', file);
                  //调接口，上传图片
                  editorUpImg(imgData).then(res => {
                      if(res.code == 0){
                          //上传后得到图片 url alt href 最后插入图片
                          insertFn(res.data);
                      }else{
                      }
                  })

    },*/
  }
}
</script>

<style scoped>

</style>